<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/rem.js"></script>
    <script src="js/border1px.js"></script>
    
    <style>
        .box {
            position: fixed;
            top:0;
            left:0;
            width:7.5rem;
            height:2rem;
            background:pink;
        }

        .boxItem {
            position: fixed;
            top:0;
            left:0;
            width:7rem;
            height:1rem;
            background:yellow;
        }
    </style>
</head>
<body>

    <div class="box" style="top:0px">
        <div class="boxItem"></div>
        <div style="height:2000px;width:710px; margin:0 auto; background:green;">

        </div>
    </div>
    <script src="libs/zepto/zepto.js"></script>
    <script src="libs/zepto/touch.js"></script>
    <script src="libs/zepto/event.js"></script>

    <script>
        
        var y = 0;
    
        var temp = '0px';
        $('.box').off('touchstart').on('touchstart', function (e) {
            console.log(e.touches[0].pageY);
            e.preventDefault();
            // temp = parseFloat($('.box').css("top").split('px')[0], 10);
            
            var oY = parseFloat($('.box').css("top").split('px')[0], 10);
            if (oY < 0) {
                oY = 0;
            }
            y =  e.touches[0].pageY - oY;
            // y = e.touches[0].pageY;
            window.height
            
        })

        $('.box').off('touchmove').on('touchmove', function (e) {
            console.log(e.touches[0].pageY);
            var top =  `${e.touches[0].pageY - y}`;
            if (top < 0) {
                top= 0;
            }
            
            $('.box').css({"top":`${top}px`});
            
        })

        
    </script>
</body>
</html>